// 封装函数
// 添加参数：不能固定死，动画元素：ele
// 添加参数：不能固定死，css属性：style
// 添加参数：不能固定死，目标位置：target
// 添加参数：不能固定死，是否有连续动画：fn
function animate(ele, style, target, fn) {
    console.log(fn)
    // 2. 定时器
    // 2.1 先清除原来的定时器：定时器在元素里面保存
    clearInterval(ele.timeId)
    // 2.2 开启定时器
    ele.timeId = setInterval(function () {
        // 获取元素本身的style值（真正的style）：getComputedStyle
        let current = parseInt(getComputedStyle(ele)[style])

        // console.log(current)
        // 3. 位置移动：每次移动 (target - 当前位置) * 0.1
        let step = (target - current) * 0.1

        // 3.1 细节修正：像素不能是小数
        // 判定方向：是正向移动（step > 0），负向移动（step < 0）
        if (step > 0) {
            step = Math.ceil(step)
        }
        else {
            step = Math.floor(step)
        }

        // 修改元素样式
        ele.style[style] = current + step + 'px'
        // console.log(step)

        // 4. 结束：可以使用step判定：step最终一定为0 
        if (step == 0) {
            clearInterval(ele.timeId)

            // animate(ele, 'top', 400)
            // 执行回调函数：为了安全，判定是函数才执行：不是函数就不执行
            if (typeof fn == 'function') {
                fn()
            }

        }
    }, 20)
}
